<template>
  <div class="bigDiv">
    <div class="header">
       <el-input style="width:200px" v-model="userId" placeholder="用户ID/账号" />
       <el-input style="width:200px;margin-left:15px" v-model="userName" placeholder="用户昵称"/>
      <el-input style="width:200px;margin-left:15px" v-model="userName" placeholder="请选择注册时间" :suffix-icon="Calendar"/>
       <el-button type="primary" style="width:100px;margin-right:10px;margin-left:10px">查询</el-button>
        <el-button>导出</el-button>
    </div>
    <div class="tableDiv">
      <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" label="姓名">
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column align="center" property="phone" label="电话" />
        <el-table-column align="center" property="card" label="会员卡" />
        <el-table-column align="center" property="level" label="会员等级" />
        <el-table-column align="center" property="coach" label="教练" />
        <el-table-column align="center" property="state" label="账户启用状态" />
        <el-table-column label="操作" width="140">
           <template #default>
        <el-button link type="primary" size="small" @click="handleClick"
          >查看</el-button
        >
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="footer-left">
        <el-select v-model="value" class="m-2" placeholder="批量操作">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-button plain style="margin-left:10px">确定</el-button>
      </div>
      <div class="footer-right">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import {ref,reactive} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {Calendar} from '@element-plus/icons-vue';
import { ElTable } from 'element-plus'
export default defineComponent({
  name: "UserPage",
  setup(){
    const userId=ref('')
    const userName=ref('')
    interface User {
      name:string,
      phone:number,
      card:string,
      level:string,
      coach:string,
      state:string
    }
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    const handleSelectionChange = (val: User[]) => {
      multipleSelection.value = val
    }
    //表格数据
    const tableData: User[] = [
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },
      {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      }, {
        name: 'Tom',
        phone: 1553158666,
        card: '体验两次',
        level:'一般会员',
        coach:'无',
        state:'开启'
      },

    ]
    //批量操作
    const value = ref('')
    const options = [
      {
        value: '启用',
        label: '启用',
      },
      {
        value: '停用',
        label: '停用',
      },
      {
        value: '删除',
        label: '删除',
      },
    ]
    return{
      userId,
      userName,
      tableData,
      options
    }
  }
})
</script>

<style scoped>
.bigDiv{
  width: 1250px;
  padding:10px;
  background-color: #fff;
}
.header{
  background-color: #fff;
}
.footer{
  background-color: #fff;
  width:100%;
  height:50px;
  margin-top:10px;
}
.tableDiv{
  margin-top:10px
}
.footer-left{
  float:left
}
.footer-right{
  float:right
}
</style>